import 'package:flutter/material.dart';

import 'address_book_page.dart';
import 'const.dart';

class IndexBar extends StatefulWidget {
  final void Function(String str) indexBarCallBack;
  const IndexBar({super.key, required this.indexBarCallBack});

  @override
  _IndexBarState createState() => _IndexBarState();
}

//获取选中的Item的字符！！
int getIndex(BuildContext context, Offset globalPosition) {
  //拿到点前小部件的盒子
  RenderBox? box = context.findRenderObject() as RenderBox;
  //拿到y值，globalToLocal当前位置我部件的原点(小部件左上角)的距离（x,y）
  double y = box.globalToLocal(globalPosition).dy;
  //算出字符高度
  var itemHeight = screenHeight(context) / 2 / INDEX_WORDS.length;
  //算出第几个item
  int index = (y ~/ itemHeight).clamp(0, INDEX_WORDS.length - 1);
  return index;
}

class _IndexBarState extends State<IndexBar> {
  Color _bkColor = Color.fromRGBO(1, 1, 1, 0.0);
  Color _textColor = Colors.black;
  double _indicatorY = 0.0;
  String _indicatorText = 'A';
  bool _indicatorHidden = true;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final List<Widget> words = [];
    for (int i = 0; i < INDEX_WORDS.length; i++) {
      words.add(Expanded(
          child: Text(
            INDEX_WORDS[i],
            style: TextStyle(fontSize: 10, color: _textColor),
          )));
    }
    return Positioned(
      right: 0.0,
      top: screenHeight(context) / 8,
      height: screenHeight(context) / 2,
      width: 120,
      child: Row(
        children: [
          Container(
            alignment: Alignment(0, _indicatorY),
            width: 100,
            // color: Colors.red,
            child: _indicatorHidden
                ? null
                : Stack(
              alignment: Alignment(-0.2, 0),
              children: [
                Image(
                  image: AssetImage('assets/images/气泡.png'),
                  width: 60,
                ),
                Text(
                  _indicatorText,
                  style: TextStyle(fontSize: 35, color: Colors.white),
                )
              ],
            ),
          ), //指示器
          GestureDetector(
            onVerticalDragUpdate: (DragUpdateDetails details) {
              int index = getIndex(context, details.globalPosition);
              widget.indexBarCallBack(INDEX_WORDS[index]);
              setState(() {
                _indicatorY = 2.2 / INDEX_WORDS.length * index - 1.1;
                _indicatorText = INDEX_WORDS[index];
                _indicatorHidden = false;
              });
            },
            onVerticalDragDown: (DragDownDetails details) {
              int index = getIndex(context, details.globalPosition);
              widget.indexBarCallBack(INDEX_WORDS[index]);
              setState(() {
                _indicatorY = 2.2 / INDEX_WORDS.length * index - 1.1;
                _indicatorText = INDEX_WORDS[index];
                _indicatorHidden = false;
                _bkColor = Color.fromRGBO(1, 1, 1, 0.5);
                _textColor = Colors.white;
              });
            },
            onVerticalDragEnd: (DragEndDetails details) {
              setState(() {
                _indicatorHidden = true;
                _bkColor = Color.fromRGBO(1, 1, 1, 0.0);
                _textColor = Colors.black;
              });
            },
            child: Container(
              width: 20,
              color: _bkColor,
              child: Column(
                children: words,
              ),
            ),
          ), //索引条
        ],
      ),
    );
  }
}